<template>
  <div
    :class="['message-box',hover ? 'pulse animated slow' : '']"
    @mouseenter="hoverAction(true)"
    @mouseleave="hoverAction(false)"
  >
    <div :class="['message-box-title clearfix',type=='title1' ? 'title1' : type]" v-if="title!==''">
      <div class="message-box-title-inner" :style="{borderLeftColor:noBorder ? 'transparent':''}">
        <div class="toPage-btn pull-right" v-if="haveRightBtn || haveMore">
          <slot name="tab-label">
            <div class="toPage-btn" v-if="haveMore" @click="toPage">更多</div>
          </slot>
        </div>
        <ul
          class="message-box-title-text f-clearfix"
          v-if="title"
          @click="onTitle"
          :class="[activeLink ? 'activeLink' : '']"
        >
          <li
            :class="['message-box-title-item','f-left',typeof title =='object' && active0 ?'active' : '']"
            @click="clickItem(0)"
          >
            <span
              class="title-text-icon"
              :style="{backgroundImage:`url(${typeof icon == 'string' ? icon : icon[0]})`}"
              v-if="icon"
            ></span>
            <span class="title-text-content">{{typeof title == 'string' ? title : title[0]}}</span>
          </li>
          <li
            :class="['message-box-title-item','f-left', active1 ? 'active' : '']"
            v-if="typeof title =='object'"
            :style="{cursor:typeof title =='object' ? 'pointer' : 'default'}"
            @click="clickItem(1)"
          >
            <span class="title-text-line f-ml8 f-mr5"></span>
            <span class="title-text-icon" :style="{backgroundImage:`url(${icon[1]})`}" v-if="icon"></span>
            <span class="title-text-content">{{title[1]}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="message-box-content" :style="{height:height - 42 + 'px',padding:noPadding + 'px'}">
      <slot></slot>
    </div>
    <Spin v-show="isLoading" fix style="z-index:1000"></Spin>
  </div>
</template>
<script>
export default {
  name: "massageBox",
  props: {
    icon: {
      type: String,
      default: ""
    },
    haveBorder: {
      type: Boolean,
      default: false
    },
    haveRightBtn: {
      type: Boolean,
      default: false
    },
    noPadding: {
      type: String,
      default: '0'
    },
    title: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ""
    },
    height: {
      type: Number,
      default: 0
    },
    haveMore: {
      type: Boolean,
      default: false
    },
    cid: {
      type: String,
      default: ""
    },
    noBorder: {
      type: Boolean,
      default: false
    },
    activeLink: {
      //标题可跳转链接 样式属性
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isLoading: true,
      active0: true,
      active1: false,
      hover: false
    };
  },
  methods: {
    toPage() {
      this.$emit("on-topage");
    },
    clickItem(index) {
      this.active0 = this.active1 = false;
      this[`active${index}`] = true;
      this.$emit("on-click-title", this.cid, index);
    },
    onTitle() {
      this.$emit("on-title");
    },
    hoverAction(status) {
      this.hover = status;
    }
  }
};
</script>
<style lang="scss" scoped>
.message-box {
  position: relative;
  overflow: hidden;
  animation-delay: 1s;
  // animation-duration: .5s;
  animation-iteration-count: 1;
  // animate-duration: 2s;    //动画持续时间
  // animate-delay: 1s;    //动画延迟时间
  // animate-iteration-count: 2;    //动画执行次数

  .message-box-title-item {
    height: 42px;
    overflow: hidden;
    // cursor: pointer;
    &.active {
      color: #00a4ff;
    }
    .title-text-content {
      font-size: 16px;color: #333;
    }
  }
  .title-text-line {
    display: inline-block;
    height: 26px;
    vertical-align: middle;
    width: 1px;
    background-color: #ccc;
  }
  position: relative;
  z-index: 20;
  border: 1px solid #fff;
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 rgba(8, 147, 253, 0.1);
  .message-box-title {
    position: relative;
    height: 42px;
    line-height: 42px;
    margin: 0 -1px;
    background-color: #fff;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    .message-box-title-inner {
      border-left: 5px solid #00a4ff;
      padding: 0 15px;
      > div:first-child {
        overflow: hidden;
      }
      > div {
        color: #151515;
        span {
          font-size: 16px;
        }
      }
      .toPage-btn {
        color: #009bfb;
      }
      .title-text-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        top: 5px;
        margin-right: 5px;
      }
    }

    .toPage-btn {
      line-height: 42px;
      font-size: 14px !important;
      cursor: pointer;
    }
    &.title1 {
      text-align: left;
      background-color: #f6f6f7;
      position: relative;
    }
    &.title2 {
      text-align: center;
      background-color: #f6f6f7;
      border-bottom: 2px solid #ddd;
    }
  }
  //鼠标移到 可以跳转的标题时变字体色值
  .activeLink {
    &:hover span.title-text-content {
      color: #009bfb;
      cursor: pointer;
    }
  }
  .message-box-content {
    position: relative;
    z-index: 10;
    height: 100%;
    background-color: #fff;
  }
}
</style>